<script setup lang="ts">
import type { SysDictionaryDataVo } from '#/system/dict/dictionaryData'
import { getByTypeDictData } from '@/api/system/dict/dictData'

interface Props {
  /**
   * 字典类型
   */
  dictType: string
  /**
   * 类型
   */
  type?: 'select' | 'radio' | 'checkbox' | 'tag' | 'segmented'
  /**
   * 占位提示
   */
  placeholder?: string
  /**
   * 是否多选
   */
  multiple?: boolean
  /**
   * tag标签主题
   */
  tagEffect?: 'dark' | 'light' | 'plain'
  /**
   * Tag 是否为圆形
   */
  tagRound?: boolean
  /**
   * 是否有边框描边
   */
  tagHit?: boolean
  /**
   * 是否禁用渐变动画
   */
  tagDisableTransitions?: boolean
  /**
   * 是否可关闭
   */
  tagClosable?: boolean
  /**
   * 尺寸
   */
  size?: 'default' | 'small' | 'large'
}
const props = withDefaults(defineProps<Props>(), {
  dictType: '',
  type: 'select',
  placeholder: '',
  multiple: false,
  tagEffect: 'light',
  tagRound: false,
  tagHit: false,
  tagDisableTransitions: false,
  tagClosable: false,
  size: 'default',
})
const modelValue = defineModel<any>()

let dataList = $ref<SysDictionaryDataVo[]>([])

function getDictList() {
  getByTypeDictData(props.dictType as any).then((res) => {
    dataList = res
    dataList.forEach((item) => {
      item.label = item.name
      item.value = item.dictValue
    })
  })
  if (props.type !== 'checkbox') {
    if (modelValue.value)
      return
    for (const item of dataList) {
      if (!modelValue.value) {
        if (item.dictDefault === 1) {
          modelValue.value = item.dictValue
          break
        }
      }
    }
  }
}
// 统一转成字符串
watch(() => modelValue, () => {
  if (modelValue.value === undefined)
    return
  modelValue.value = `${modelValue.value}`
}, {
  deep: true,
  immediate: true,
})

onMounted(() => {
  getDictList()
})
</script>

<template>
  <el-select
    v-if="props.type === 'select'"
    v-model="modelValue"
    :placeholder="props.placeholder"
    :multiple="multiple"
    :size="size"
  >
    <el-option
      v-for="item in dataList"
      :key="item.dictValue"
      :label="item.name"
      :value="item.dictValue"
    />
  </el-select>
  <el-radio-group
    v-else-if="props.type === 'radio'"
    v-model="modelValue"
    :size="size"
  >
    <el-radio
      v-for="item in dataList"
      :key="item.dictValue"
      :value="item.dictValue"
    >
      {{ item.name }}
    </el-radio>
  </el-radio-group>
  <el-checkbox-group
    v-else-if="props.type === 'checkbox'"
    v-model="modelValue"
    :size="size"
  >
    <el-checkbox
      v-for="item in dataList"
      :key="item.dictValue"
      :label="item.name"
      :value="item.dictValue"
    />
  </el-checkbox-group>
  <sy-segmented
    v-else-if="props.type === 'segmented'"
    v-model="modelValue"
    :options="(dataList as any)"
  />
  <div v-else-if="props.type === 'tag'" un-flex="~ gap-2">
    <el-tag
      v-for="item in dataList"
      :key="item.dictValue"
      :effect="tagEffect"
      :round="tagRound"
      :hit="tagHit"
      :closable="tagClosable"
      :disable-transitions="tagDisableTransitions"
      :size="size"
      :type="item.dictStyle as any"
    >
      {{ item.name }}
    </el-tag>
  </div>
</template>

<style scoped></style>
